<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    <title>Forms</title>
    <link rel="stylesheet" type="text/css" href="../../extjs3/resources/css/ext-all.css"/>

    <!-- GC -->
    <!-- LIBS -->
    <script type="text/javascript" src="../../extjs3/adapter/ext/ext-base.js"></script>
    <!-- ENDLIBS -->

    <script type="text/javascript" src="../../extjs3/ext-all-debug.js"></script>

	<script type="text/javascript" src="../js/3rdparty/Ext.lib.Ajax.js"></script>
	
	<!-- required for cookie compression -->
	<script type="text/javascript" src="../js/3rdparty/lz77.js"></script>

	<!-- translation part -->     
        <script type="text/javascript" src="../js/Ext.translate.js"></script>
		<script type="text/javascript" src="../js/Ext.translate.Manager.js"></script>        
		<script type="text/javascript" src="../js/Ext.translate.local.js"></script>          
        <script type="text/javascript" src="../js/Ext.translate.Cache.js"></script>
        <script type="text/javascript" src="../js/Ext.translate.MessageBox.js"></script>
        <script type="text/javascript" src="../js/Ext.translate.Override.js"></script>

         <script type="text/javascript" src="../js/3rdparty/Ext.ux.form.IconCombo.js"></script>

</head>
<body>
<script type="text/javascript" >

function intiLangSelector(){

    var languageId = Ext.id();
      
    var _formPanel = new Ext.form.FormPanel({
       region: 'center',
       border: false,
       bodyStyle: "padding: 5px;",
       baseCls: 'x-plain',
       labelWidth: 'auto',
       defaults: {
         width: 250
       },
       items: [{
           xtype: 'iconcombo',
           id: languageId,
           fieldLabel: 'Select Language',
           store: new Ext.data.SimpleStore({
             fields: ['languageCode', 'languageName', 'countryFlag'],
             data: Ext.translate.languages
           }),
           valueField: 'languageName',
           value: Ext.translate.defaultLanguage,
           displayField: 'languageName',
           iconClsField: 'countryFlag',
           triggerAction: 'all',
           editable: false,
           disabled : true ,
           mode: 'local'
         }   ]

     });    

    
    var selector = Ext.getCmp(languageId);
    selector.on('render',
  		  function() {
  	  
  	  		var fn = function (){
  	  				  
  					  Ext.getCmp(languageId).store.loadData(Ext.translate.languages);
  					  Ext.translate.Manager.generateFlagsCSS(Ext.translate.languages);
  					  Ext.getCmp(languageId).enable();	  	
  					  Ext.getCmp(languageId).setValue(Ext.translate.currentLanguage);
  	  		};	
  	  
  	  		Ext.translate.Manager.getSupportedLanguages(fn.createDelegate(this));
  	  		  
  		  }, this);
    

    selector.on('select', function() {	
  	      var cmp = Ext.getCmp(languageId);
  	      Ext.translate.Manager.setlanguage(cmp.getValue());
  	      Ext.translate.Manager.applyTranslation(cmp.getValue());
    });
    
    _formPanel.render(document.body);
 };


function dome(){
	Ext.MessageBox.show({
		title: 'We love ExtJs',
		msg: 'This is translated message!',
		buttons: Ext.MessageBox.OK,
		icon: Ext.MessageBox.INFO
	});
};
	

function dome2(){
	Ext.MessageBox.show({
		title: 'We love home',
		msg: 'New message!',
		buttons: Ext.MessageBox.OK,
		icon: Ext.MessageBox.INFO
	});
};
			
Ext.onReady(function(){



    Ext.translate.Manager.Init({
			        currentLanguage : 'CROATIAN',
			    	URL : '../TranslateServlet',
			        languageImagesURL : '../img/flags/',
			        autocreateIonsCSS : true});

    Ext.translate.Manager.getSupportedLanguages();

    intiLangSelector();

    dome();
});


function repeat(){
	Ext.MessageBox.updateText('This is new sentence!');
		
};
</script>

<a href="#" onclick="repeat()">New Text </a>
<br><br>
<a href="#" onclick="dome()">Show message</a>
<br><br>
<a href="#" onclick="dome2()">Show message</a>

<pre class="brush:js">

	Ext.MessageBox.show({
		title: 'We love ExtJs',
		msg: 'This is translated message!',
		buttons: Ext.MessageBox.OK,
		icon: Ext.MessageBox.INFO
	});

	// Basic alert:
	Ext.Msg.alert('Status', 'Changes saved successfully.');

	// Prompt for user data and process the result using a callback:
	Ext.Msg.prompt('Name', 'Please enter your name:', function(btn, text){
	    if (btn == 'ok'){
	        // process text value and close...
	    	Ext.MessageBox.updateText('This is new sentence!');
	    }
	});
</pre>	
</body>
</html>
